<template>
  <div class="login">
    <div class="login-con animated fadeInRight">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <Form ref="loginForm" :model="sysLogin" :rules="rules" @keydown.enter.native="handleSubmit">
            <FormItem prop="username">
              <Input v-model="sysLogin.username" placeholder="请输入用户名">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="sysLogin.password" placeholder="请输入密码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="captcha">
              <Input style="width: 160px;float: left" v-model="sysLogin.captcha" placeholder="请输入图形验证码">
                <span slot="prepend">
                  <Icon :size="14" type="ios-key"></Icon>
                </span>
              </Input>
              <img class="login-captcha" :src="yzm_message" v-on:click="change_yzm_message">
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long>登录</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { BASE_URL } from '@/config'
export default {
  data () {
    return {
      sysLogin: { username: 'admin', password: 'admin', captcha: '', uuid: '' },
      yzm_message: '',
      rules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 4, message: '密码长度不能小于4位', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.change_yzm_message()
  },
  methods: {
    ...mapActions([
      'login'
    ]),
    change_yzm_message () {
      this.sysLogin.uuid = Math.floor(Math.random() * 1000000)
      this.yzm_message = BASE_URL + '/captcha.jpg/' + this.sysLogin.uuid
    },
    handleSubmit () {
      this.login(this.sysLogin).then(() => {
        this.$router.push('/main')
      }).catch(error => {
        alert(error)
      })
    }
  }
}
</script>

<style lang="less">
.login{
  /*z-index: -999;*/
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  background-image: url("../../assets/img/login.png");
  background-size: cover;
  overflow: hidden;
  &-con{
    position: absolute;
    right: 120px;
    top: 25%;
    transform: translateY(-60%);
    width: 300px;
    &-header{
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con{
      padding: 10px 0 0;
      .login-captcha{
        margin-left: 15px;
        height: 32px;
        width: 90px;
        border-radius: 4px;
      }
    }
    .login-tip{
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }

}
</style>
